import React, { useEffect, useMemo, useState } from "react";
import "../../../assets/sass/create_template/TmpTool/component_settings/component_settings.css";
import {
  CloseOutlined,
  PlusOutlined,
  MinusOutlined,
  PlayCircleOutlined,
  HighlightOutlined,
  GoldenFilled,
  SyncOutlined,
  ScissorOutlined,
  LayoutOutlined,
  CaretRightOutlined,
  ClearOutlined,
  DownOutlined,
} from "@ant-design/icons";
import { useSelector, useDispatch } from "react-redux";
import { updateItem, addanimation, previewAnimation } from "../../../store";
import { animationList } from "../../../data/tmp";
import { Checkbox, ColorPicker, Input, Select } from "antd";
import type { ColorPickerProps, GetProp } from "antd";

type Color = GetProp<ColorPickerProps, "value">;

const ComponentSettings = (props: any) => {
  const dispatch = useDispatch();

  //关闭组件设置
  const closeSettimgs = () => {
    props.click();
  };

  //tab
  const tabList = ["样式", "动画", "触发"];
  const [tabItemIndex, setTabItemIndex] = useState(0);
  const changeTabItem = (index) => {
    setTabItemIndex(index);
  };

  //字号
  const hyphenList = [
    { value: "12px", label: "12px" },
    { value: "13px", label: "13px" },
    { value: "14px", label: "14px" },
    { value: "16px", label: "16px" },
    { value: "18px", label: "18px" },
    { value: "20px", label: "20px" },
    { value: "24px", label: "24px" },
    { value: "32px", label: "32px" },
    { value: "48px", label: "48px" },
    { value: "64px", label: "64px" },
    { value: "96px", label: "96px" },
    { value: "128px", label: "128px" },
    { value: "192px", label: "192px" },
    { value: "256px", label: "256px" },
  ];

  //获取当前选中的组件
  const currentcomponentType = useSelector(
    (state: any) => state.currentcomponent
  );

  //更改字号
  const changeHyphen = (value: any) => {
    dispatch(updateItem({ fontSize: value }));
  };

  //增加字号
  const addHyphenSize = () => {};

  //动画tab
  const [animationTab, setAnimationTab] = useState(0);

  //更改动画tab
  const changeAnimationTab = (index) => {
    setAnimationTab(index);
  };

  //是否显示动画
  // const [seeAnimation, setSeeAnimation] = useState(false);
  const seeAnimationClick = () => {
    // setSeeAnimation(true);
    const animationDom: any = document.querySelector(".see_add_animation");
    animationDom.style.left = 0 + "px";
  };

  //更改字体颜色
  const [color, setColor] = useState<Color>("#000000");

  const bgColor = useMemo<string>(
    () => (typeof color === "string" ? color : color!.toHexString()),
    [color]
  );

  const btnStyle: React.CSSProperties = {
    backgroundColor: bgColor,
  };

  const setTextColor = (value, hex) => {
    setColor(hex);
  };
  useEffect(() => {
    dispatch(
      updateItem({
        color,
      })
    );
  }, [color]);

  const propLable = useSelector((state: any) => state.currentcomponent);

  //预览动画
  const animationItemEnter = (item: any) => {
    dispatch(
      addanimation({
        data: false,
        value: `animate__animated animate__${item.value}`,
      })
    );
  };

  //添加动画
  const animationItemClick = (item: any) => {
    const animationDom: any = document.querySelector(".see_add_animation");
    animationDom.style.left = 330 + "px";
    dispatch(
      addanimation({
        data: true,
        value: `animate__animated animate__${item.value}`,
        name: item.label,
      })
    );
  };

  //鼠标离开清楚预览动画
  const animationItemLeave = () => {
    dispatch(
      addanimation({
        data: false,
        value: "",
      })
    );
  };
  let count = 0;
  //预览已有动画
  const previewAnimationClick = () => {
    console.log(currentcomponentType.classNameList);
    if (currentcomponentType.classNameList.length) {
      const setTimer = setInterval(() => {
        dispatch(
          previewAnimation(currentcomponentType.classNameList[count].value)
        );
        count++;
        if (count >= currentcomponentType.classNameList.length) {
          clearInterval(setTimer);
          count = 0;
        }
      }, 1000);
    }
  };

  //收起动画小菜单
  // const collapseMain = (index) => {};

  return (
    <div className="component_settings">
      <div className="component_header">
        <div className="title">组件设置</div>
        <div className="close" onClick={closeSettimgs}>
          <CloseOutlined />
        </div>
      </div>
      <div className="component_tab">
        {tabList &&
          tabList.map((item, index) => {
            return (
              <div
                key={index}
                onClick={() => changeTabItem(index)}
                className={
                  tabItemIndex === index
                    ? "component_tab_item component_tab_item_active"
                    : "component_tab_item"
                }
              >
                {item}
              </div>
            );
          })}
      </div>
      <div className="component_box">
        {/* 样式 */}
        {tabItemIndex === 0 && (
          <div className="box_style">
            {/* 组件存在并且时文本类型 */}
            {currentcomponentType &&
              currentcomponentType.component === "Dtext" && (
                <>
                  {/* 字体 */}
                  <div className="style">
                    <div className="more_font">
                      <div className="title">样式</div>
                      <div className="more">更多字体&gt;</div>
                    </div>
                    <div className="select_font">
                      <Select
                        defaultValue="思源黑体"
                        className="select_box"
                        options={[{ value: "思源黑体", label: "思源黑体" }]}
                      />
                    </div>
                  </div>
                  {/* 字号 */}
                  <div className="hyphen">
                    <div className="title">字号</div>
                    <div className="select_hyphen_box">
                      <Select
                        onChange={changeHyphen}
                        defaultValue={parseInt(
                          currentcomponentType.style.fontSize
                        )}
                        className="select_hyphen"
                        options={hyphenList}
                      />
                    </div>
                    <div className="add_hyphen_size" onClick={addHyphenSize}>
                      <PlusOutlined />
                    </div>
                    <div className="sub_hyphen_size">
                      <MinusOutlined />
                    </div>
                  </div>
                  {/* 文本颜色 */}
                  <div className="text_color">
                    <div className="title">文本颜色</div>
                    <ColorPicker value={color} onChange={setTextColor}>
                      <div className="pick_color" style={btnStyle}>
                        <div className="icon">
                          <HighlightOutlined />
                        </div>
                      </div>
                    </ColorPicker>
                  </div>
                </>
              )}
            {/* 组件存在并且时类图片型 */}
            {currentcomponentType &&
              currentcomponentType.component === "Dimg" && (
                <>
                  <div className="image_operate">
                    <div className="img_box">
                      <img src={propLable.propLable} />
                    </div>
                    <div className="operate_box">
                      <div className="change_picture">
                        <SyncOutlined />
                        换图
                      </div>
                      <div className="cropping">
                        <ScissorOutlined />
                        裁切
                      </div>
                      <div className="cutouts">
                        <LayoutOutlined />
                        抠图
                      </div>
                    </div>
                  </div>
                </>
              )}
          </div>
        )}
        {/* 动画 */}
        {tabItemIndex === 1 && (
          <div className="animation">
            <div className="animation_btn">
              <div className="add_animation" onClick={seeAnimationClick}>
                <PlusOutlined />
                添加动画
              </div>
              <div
                className="preview_animation"
                onClick={previewAnimationClick}
              >
                <PlayCircleOutlined />
                预览动画
              </div>
              {/* {seeAnimation && ( */}
              <div className="see_add_animation">
                <div className="see_add_animation_tab">
                  {animationList &&
                    animationList.map((item: any, index) => {
                      return (
                        <div
                          className={
                            animationTab === index
                              ? "see_add_animation_tab_item see_add_animation_tab_item_active"
                              : "see_add_animation_tab_item"
                          }
                          key={index}
                          onClick={() => changeAnimationTab(index)}
                        >
                          {item.label}
                        </div>
                      );
                    })}
                </div>
                <div className="enter_animation_scroll">
                  <div className="enter_animation_box">
                    {animationList[animationTab].children.map((item, index) => {
                      return (
                        <div
                          className="enter_animation_item"
                          key={index}
                          onMouseEnter={() => animationItemEnter(item)}
                          onClick={() => animationItemClick(item)}
                          onMouseLeave={animationItemLeave}
                        >
                          <GoldenFilled className="icon" />
                          <span className="text">{item.label}</span>
                        </div>
                      );
                    })}
                  </div>
                </div>
              </div>
              {/* )} */}
            </div>
            <div className="has_animation">
              {currentcomponentType &&
                currentcomponentType.classNameList.map((item, index) => {
                  return (
                    <div key={index} className="has_animation_item">
                      <div className="has_animation_item_top">
                        <div className="title">动画{index + 1}</div>
                        <div className="type">
                          {item.name}
                          <CaretRightOutlined />
                        </div>
                        <div className="start">
                          <PlayCircleOutlined />
                        </div>
                        <div className="del">
                          <ClearOutlined />
                        </div>
                        <div
                          className="drop"
                          // onClick={() => collapseMain(index)}
                        >
                          <DownOutlined />
                        </div>
                      </div>
                      <div className="has_animation_item_main">
                        <div className="time">
                          <div className="time_title">时间</div>
                          <Input
                            className="time_input"
                            suffix="s"
                            defaultValue="1"
                          />
                        </div>
                        <div className="delay">
                          <div className="delay_title">延迟</div>
                          <Input
                            className="delay_input"
                            suffix="s"
                            defaultValue="0.2"
                          />
                        </div>
                        <div className="frequency">
                          <div className="frequency_title">次数</div>
                          <Input
                            className="frequency_input"
                            suffix="s"
                            defaultValue="1"
                          />
                        </div>
                        <div className="circulate">
                          <Checkbox></Checkbox>
                          <div className="circulate_title">循环次数</div>
                        </div>
                      </div>
                    </div>
                  );
                })}
            </div>
          </div>
        )}
        {/* 触发 */}
        {tabItemIndex === 2 && <div>触发</div>}
      </div>
      <div className="text_settings">文本偏好设置</div>
    </div>
  );
};

export default ComponentSettings;
